import { Component } from 'react'
import { connect } from 'react-redux'
import { getChannels } from './store/actions/channel'

export default function App() {
  return (
    <>
      {/* 头部频道 */}
      <Channel />
      {/* 文章列表 */}
      <Article />
    </>
  )
}

// 没有 hooks 以前的写法
// mapState 相当于 hooks 里面的 useSelector
const mapState = (state) => state.channel
// Class 类组件是通过  connect() 函数把 State 和 dispatch 映射到组件的 props 上，从而实现调用
const Channel = connect(mapState)(
  class extends Component {
    componentDidMount() {
      this.props.dispatch(getChannels())
    }
    render() {
      const { list, active } = this.props
      return (
        <ul className='catagtory'>
          {list.map((item) => (
            <li key={item.id} className={item.id === active ? 'select' : ''}>
              {item.name}
            </li>
          ))}
        </ul>
      )
    }
  },
)

function Article() {
  return (
    <div className='list'>
      <div className='article_item'>
        <h3 className='van-ellipsis'>JVM堆 栈 方法区详解</h3>
        <div className='img_box'>
          <img src='http://toutiao.itheima.net/resources/images/54.jpg' className='w100' alt='' />
        </div>
        <div className='info_box'>
          <span>爱妃</span>
          <span>152评论</span>
          <span>2019-03-11 09:00:00</span>
        </div>
      </div>
      <div className='article_item'>
        <h3 className='van-ellipsis'>Maven 私服搭建</h3>
        <div className='img_box'>
          <img src='http://toutiao.itheima.net/resources/images/12.jpg' className='w100' alt='' />
        </div>
        <div className='info_box'>
          <span>爱妃</span>
          <span>156评论</span>
          <span>2019-03-11 09:00:00</span>
        </div>
      </div>
      <div className='article_item'>
        <h3 className='van-ellipsis'>React 深入系列４：组件的生命周期</h3>
        <div className='img_box'>
          <img src='http://toutiao.itheima.net/resources/images/30.jpg' className='w100' alt='' />
        </div>
        <div className='info_box'>
          <span>爱妃</span>
          <span>43评论</span>
          <span>2019-03-11 09:00:00</span>
        </div>
      </div>
    </div>
  )
}
